<script setup>
import { ref, onMounted, computed } from 'vue'
import { getActivityListAPI } from '@/api/active'
import { getStreetListAPI } from '@/api/street'
import { rotationListAPI, homeImageAPI } from '@/api/common'
import dayjs from 'dayjs'
const today = dayjs()
const IMAGE_URL = computed(() => import.meta.env.VITE_IMAGE_URL)
const showPopup = ref(false)
const currentIndex = ref(0)
const swiperChange = (e) => {
  const {
    detail: { current },
  } = e
  currentIndex.value = current
}

// 获取轮播图
const rotationList = ref([])
const getRotationList = async () => {
  const res = await rotationListAPI()
  rotationList.value = res.rows
}

// 获取首页弹窗图片
const imageUrl = ref('')
const getImage = async () => {
  const res = await homeImageAPI()
  imageUrl.value = res.data?.confUrl
}

// 获取活动列表
const dataList = ref([])
const getDataList = async () => {
  const res = await getActivityListAPI({
    // currentDate: today.format('YYYY-MM-DD'),
  })
  dataList.value =
    res.rows?.map((item) => {
      return {
        ...item,
        acCover: `${import.meta.env.VITE_IMAGE_URL}${item.acCover}`,
      }
    }) || []
  // console.log(dataList.value, '25===')
}

// 获取街区列表
const blockList = ref([])
const getBlockList = async () => {
  const res = await getStreetListAPI()
  blockList.value =
    res.data.map((item) => {
      return {
        ...item,
        streetCover: `${import.meta.env.VITE_IMAGE_URL}${item.streetCover}`,
      }
    }) || []
  console.log(blockList.value, '43===')
}

const toPage = (index) => {
  if (index == 1 || index == 4) {
    uni.showToast({
      icon: 'none',
      title: '敬请期待～',
    })
  } else if (index == 2) {
    uni.navigateTo({ url: '/pages/active-list/active-list' })
  } else if (index == 3) {
    uni.navigateTo({ url: '/pages/live-show/live-show' })
  } else if (index == 5) {
    //活动列表
    uni.navigateTo({ url: '/pages/active-list/active-list' })
  }
}

onMounted(() => {
  showPopup.value = true
  getRotationList()
  getDataList()
  getBlockList()
  getImage()
})
</script>

<template>
  <view class="home">
    <view class="fix-header">节日大道</view>
    <!-- 轮播图 -->
    <swiper
      class="swiper"
      circular
      :indicator-dots="false"
      :autoplay="true"
      :interval="5000"
      :duration="500"
      @change="swiperChange"
    >
      <swiper-item v-for="(item, index) in rotationList" :key="index">
        <image :src="`${IMAGE_URL}${item.picUrl}`" mode="aspectFill" />
      </swiper-item>
    </swiper>
    <!-- 轮播图点 -->
    <view class="dots">
      <view
        v-for="(item, index) in rotationList"
        :key="index"
        class="dot-item"
        :class="currentIndex == index ? 'active-dot' : ''"
      ></view>
    </view>
    <!-- 快捷入口 -->
    <view class="quick-entrance">
      <view class="list-flex2">
        <image
          @click="toPage(1)"
          src="../../static/images/home/news2.png"
          mode="aspectFill"
        />
        <image
          @click="toPage(2)"
          src="../../static/images/home/calendar2.png"
          mode="aspectFill"
        />
      </view>
      <view class="list-flex2">
        <image
          @click="toPage(3)"
          src="../../static/images/home/advertising2.png"
          mode="aspectFill"
        />
        <image
          @click="toPage(4)"
          src="../../static/images/home/streaming.png"
          mode="aspectFill"
        />
      </view>
      <!-- <view class="list-flex2">
        <image src="../../static/images/home/contact.png" mode="aspectFill" />
        <image src="../../static/images/home/venue.png" mode="aspectFill" />
      </view> -->
    </view>
    <!-- 热门活动 -->
    <view class="active-List">
      <split-title
        src="../../static/images/home/hot.png"
        title="热门活动"
        eTitle="Popular Activities"
      />

      <!-- 活动列表 :dataList="dataList" -->
      <custom-swiper v-if="dataList.length > 0" :dataList="dataList" />
      <view v-else class="no-data">暂无活动</view>

      <view v-if="dataList.length > 0" @click="toPage(5)" class="show-more"
        >查看更多</view
      >
    </view>

    <split-title
      src="../../static/images/home/road.png"
      title="街区介绍"
      eTitle="Block Introduction"
    />

    <!-- 街区 -->
    <fes-block-list
      v-if="blockList && blockList.length > 0"
      :dataList="blockList"
    />
    <view v-else class="no-data">暂无数据</view>

    <!-- 蒙层 -->
    <fes-popup v-if="showPopup">
      <template #content>
        <view class="modal">
          <image
            class="ad"
            :src="`${IMAGE_URL}${imageUrl}`"
            mode="aspectFill"
          />
          <image
            @tap="showPopup = false"
            class="close"
            src="../../static/images/common/close.png"
            mode="aspectFill"
          />
        </view>
      </template>
    </fes-popup>
  </view>
</template>

<style lang="scss" scoped>
.home {
  padding-bottom: 50rpx;
  background: #fafafa;
  .fix-header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 176rpx;
    backdrop-filter: blur(8px);
    font-size: 34rpx;
    font-weight: 500;
    color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 20rpx;
  }
  .swiper {
    height: 1054rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .dots {
    margin-top: 20rpx;
    margin-bottom: 60rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .dot-item {
      width: 40rpx;
      height: 8rpx;
      margin-right: 8rpx;
      border-radius: 24rpx;
      background: rgba(234, 84, 4, 0.15);
    }
  }
  // 快捷入口
  .quick-entrance {
    padding: 0 40rpx;
    .list-flex3 {
      margin-bottom: 20rpx;
      display: flex;
      image {
        flex: 1;
        height: 220rpx;
      }
      image:nth-child(even) {
        margin: 0 20rpx;
      }
    }

    .list-flex2 {
      margin-bottom: 20rpx;
      display: flex;
      image {
        flex: 1;
        height: 220rpx;
      }
      image:nth-child(odd) {
        margin-right: 20rpx;
      }
    }
  }
  // 热门活动
  .active-List {
    text-align: center;
    .show-more {
      margin-bottom: 20rpx;
      background: #ea5506;
      display: inline-block;
      padding: 14rpx 40rpx;
      color: #ffffff;
      font-size: 26rpx;
      font-weight: 400;
      border-radius: 8rpx;
    }
  }
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    .ad {
      width: 500rpx;
      height: 650rpx;
    }
    .close {
      width: 60rpx;
      height: 60rpx;
      margin-top: 40rpx;
    }
  }
}
.no-data {
  text-align: center;
  margin: 50rpx 0;
}
.active-dot {
  background: #ea5404 !important;
}
</style>
